<template>
	<div class="page-container device-detection" style="max-width: 1200px;">
		<h1>设备信息检测工具</h1>
		<el-main>
			<el-row>
				<el-col :span="12">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>User Agent</span>
						</div>
						<div v-text="userAgent"></div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>浏览器类型/内核</span>
						</div>
						<div>
							<p><b>浏览器：</b>{{browserType}}</p>
							<p><b>内核：</b>{{browserKernel}}</p>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="12">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>屏幕信息</span>
						</div>
						<div>
							<p><b>屏幕尺寸：</b>{{screenSize}}</p>
							<p><b>像素比例：</b>{{pixelRatio}}</p>
							<p><b>显示密度：</b>{{density}}</p>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>特性支持</span>
						</div>
						<div>
							<p><b>CSS3 特性支持：</b>{{css3Support}}</p>
							<p><b>H5/JS 特性支持：</b>{{h5jsSupport}}</p>
						</div>
					</el-card>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="12">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>硬件信息</span>
						</div>
						<div>
							<p><b>设备内存大小：</b>{{deviceMemory}}</p>
							<p><b>CPU 核心数量：</b>{{cpuCoreCount}}</p>
							<p><b>触摸点数量上限：</b>{{maxTouchPoints}}</p>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card class="box-card">
						<div slot="header" class="clearfix">
							<span>网络信息</span>
						</div>
						<div>
							<p><b>连接类型：</b>{{effectiveType}}</p>
							<p><b>下载速度估计：</b>{{downlink}}Mbps</p>
							<p><b>往返时延估计：</b>{{rtt}}ms</p>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</el-main>
		
	</div>
</template>

<script>
	import bowser from 'bowser';

	export default {
		data() {
			return {
				userAgent: window.navigator.userAgent,
				browserType: "",
				browserKernel: "",
				screenSize: "",
				pixelRatio: "",
				density: "",
				css3Support: false,
				h5jsSupport: false,
				deviceMemory: "",
				cpuCoreCount: "",
				maxTouchPoints: "",
				effectiveType: "",
				downlink: "",
				rtt: ""
			};
		},
		mounted() {
			// 初始化各种信息
			this.initBrowser();
			this.initScreen();
			this.initSupport();
			this.initHardware();
			this.initNetwork();
		},
		methods: {
			initBrowser() {
				const parser = bowser.getParser(window.navigator.userAgent);
				this.browserType = parser.getBrowserName();
				this.browserKernel = parser.getEngineName();
			},
			initScreen() {
				this.screenSize = window.screen.width + " x " + window.screen.height;
				this.pixelRatio = window.devicePixelRatio;
				this.density = window.devicePixelRatio * 96; // 假设屏幕密度为 96dpi
			},
			initSupport() {
				this.css3Support = this.isCss3Supported();
				this.h5jsSupport = this.isH5JSSupported();
			},
			initHardware() {
				if (navigator.hardwareConcurrency) {
					this.cpuCoreCount = navigator.hardwareConcurrency;
				} else {
					this.cpuCoreCount = "无法检测";
				}

				if (navigator.deviceMemory) {
					this.deviceMemory = navigator.deviceMemory + "GB";
				} else {
					this.deviceMemory = "无法检测";
				}

				if (navigator.maxTouchPoints) {
					this.maxTouchPoints = navigator.maxTouchPoints;
				} else {
					this.maxTouchPoints = "无法检测";
				}
			},
			initNetwork() {
				if (navigator.connection) {
					const connection = navigator.connection;
					this.effectiveType = connection.effectiveType;
					this.downlink = connection.downlink.toFixed(2);
					this.rtt = connection.rtt.toFixed(0);
				} else {
					// 如果不支持 Network Information API，则使用默认值
					this.effectiveType = "未知";
					this.downlink = "未知";
					this.rtt = "未知";
				}
			},
			isCss3Supported() {
				let supported = false;
				const testDiv = document.createElement('div');
				testDiv.style.cssText = 'width:100px;height:100px;' +
					'background-image:-webkit-linear-gradient(left,' +
					' #3366ff, #33ccff);background-image:' +
					'linear-gradient(left, #3366ff, #33ccff);';
				document.body.appendChild(testDiv);

				if (testDiv.style.backgroundImage.indexOf('linear-gradient') !== -1) {
					supported = true;
				}

				document.body.removeChild(testDiv);
				return supported;
			},
			isH5JSSupported() {
				return typeof window.WebGLRenderingContext === 'function' ||
					'WebGLRenderingContext' in window;
			}
		}
	};
</script>

<style lang="scss">
	.device-detection {
		.box-card {
			min-height: 240px;
		}

		@media (max-width: 768px) {
			.el-col {
				width: 100%;
			}
		}
	}
</style>